<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       
        
    </script>
</head>
<body>
    <input type="button" value="向div中一次性添加5个按钮" onclick="doAdd3()">
    <div id="mydiv">

    </div>

    <script>
        function doAdd(){
            var mydiv=document.getElementById("mydiv");
            //循环创建5个按钮
            for(var i=1;i<6;i++){
                var input=document.createElement("input");
                input.type="button";//设置属性
                input.value="按钮";//设置属性

                //给每个按钮绑定点击事件
                input.onclick=function(){
                    console.log("您点击了第"+i+"个按钮");
                };
                mydiv.appendChild(input);
            }

        }
        
        //方式一：将创建按钮单独定义一个函数
        function createButton(n){//创建一个按钮的函数
            var input=document.createElement("input");
            input.type="button";//设置属性
            input.value="按钮";//设置属性

            //给每个按钮绑定点击事件
            input.onclick=function(){
                console.log("您点击了第"+n+"个按钮");
            };
            return input;
        }
        function doAdd1(){
            var mydiv=document.getElementById("mydiv");
            //循环创建5次按钮
            for(var i=1;i<=5;i++){
                var btn=createButton(i);
                mydiv.appendChild(btn);
            }
        }

        //方式二：为每个元素设置属性
        function doAdd2(){
            var mydiv=document.getElementById("mydiv");
            //循环创建5个按钮
            for(var i=1;i<=5;i++){
                var input=document.createElement("input");
                input.type="button";//设置属性
                input.value="按钮";//设置属性
                input.setAttribute("num",i);//设置属性
                //给每个按钮绑定点击事件
                input.onclick=function(){
                  
                    console.log("您点击了第"+this.getAttribute("num")+"个按钮");
                };
                mydiv.appendChild(input);
            }
        }

        //方式三：使用let定义变量
        function doAdd3(){
            var mydiv=document.getElementById("mydiv");
            //循环创建5个按钮
            //使用let声明变量，形成一个暂时性死区
            for(let i=1;i<6;i++){
                var input=document.createElement("input");
                input.type="button";//设置属性
                input.value="按钮";//设置属性

                //给每个按钮绑定点击事件
                input.onclick=function(){
                    console.log("您点击了第"+i+"个按钮");
                };
                mydiv.appendChild(input);
            }

        }

        
    </script>
</body>
</html>